<template>
  <div class="main">
    <!-- 用户信息面板 -->
    <el-row type="flex" justify="center">
      <el-col>
        <el-card style="position: relative">
          <el-row>
            <el-col :span="5" class="header_pic">
              <!-- 用户头像 -->
              <div class="changeHeader">
                <label for="header_pic" style="width: 150px; height: 150px">
                  <input
                    type="file"
                    id="header_pic"
                    ref="fileId"
                    @change="getHeaderPicUrl"
                    style="display: none"
                    accept=".jpeg, .jpg, .png"
                  />
                  <div>
                    <i class="el-icon-camera-solid"> 更换头像 </i>
                  </div>
                </label>
              </div>
              <el-image
                style="width: 150px; height: 150px; border-radius: 50%"
                :src="user_info.header_pic"
                fit="cover"
              ></el-image>
            </el-col>
            <el-col :span="15">
              <p class="username">{{ user_info.username }}</p>
              <p>
                所在地：{{ user_info.address ? user_info.address[0] : '无' }}
              </p>
              <p>
                所在学校：
                <el-tag>{{
                  user_info.school ? user_info.school : '无'
                }}</el-tag>
              </p>
              <p>
                个性签名：{{
                  user_info.self_sign
                    ? user_info.self_sign
                    : '这个人很懒，什么都没写...'
                }}
              </p>
            </el-col>
            <el-col :span="4">
              <div style="bottom: 0px; position: absolute">
                <el-button plain @click="dialogVisible = true"
                  >修改个人信息</el-button
                >
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 用户操作面板 -->
    <el-row type="flex" justify="center">
      <el-col>
        <el-row>
          <el-col :span="16">
            <el-card style="margin-right: 15px">
              <el-tabs v-model="activeName">
                <!-- 已发话题板块 -->
                <el-tab-pane label="已发话题" name="first">
                  <selfTopic></selfTopic>
                </el-tab-pane>
                <!-- 待审核板块 -->
                <el-tab-pane label="待审核话题" name="second">
                  <chectTopic></chectTopic>
                </el-tab-pane>
                <!-- 收藏夹板块 -->
                <el-tab-pane label="收藏夹" name="three">
                  <favoriteTopic></favoriteTopic>
                </el-tab-pane>
                <!-- 用户关注板块 -->
                <el-tab-pane label="关注用户" name="fore">
                  <userAttention></userAttention>
                </el-tab-pane>
              </el-tabs>
            </el-card>
          </el-col>
          <!-- 话题前十 -->
          <el-col :span="8">
            <el-card>
              <userPanel></userPanel>
            </el-card>
            <top10Panel></top10Panel>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 修改个人信息的dialog -->
    <el-dialog :visible.sync="dialogVisible" width="50%">
      <el-form>
        <div>
          <el-row>
            <el-col>
              <p class="dialog_head">修改信息</p>
            </el-col>
          </el-row>

          <el-form-item>
            <el-row>
              <el-col :span="4">
                <span class="user_info">用户名：</span>
              </el-col>
              <el-col :span="18">
                <input
                  v-model="user_info.username"
                  placeholder="请输入用户名"
                />
              </el-col>
              <el-col :span="2"></el-col>
            </el-row>
          </el-form-item>

          <el-form-item>
            <el-row>
              <el-col :span="4">
                <span class="user_info">所在地：</span>
              </el-col>
              <el-col :span="18">
                <el-cascader
                  v-model="user_info.address"
                  :options="cityData"
                  :props="{ expandTrigger: 'hover' }"
                ></el-cascader>
              </el-col>
              <el-col :span="2"></el-col>
            </el-row>
          </el-form-item>

          <el-form-item>
            <el-row>
              <el-col :span="4">
                <span class="user_info">所在学校：</span>
              </el-col>
              <el-col :span="18">
                <input
                  v-model="user_info.school"
                  placeholder="请输入所在学校"
                />
              </el-col>
              <el-col :span="2"></el-col>
            </el-row>
          </el-form-item>

          <el-form-item>
            <el-row>
              <el-col :span="4">
                <span class="user_info">个性签名：</span>
              </el-col>
              <el-col :span="18">
                <input
                  v-model="user_info.self_sign"
                  placeholder="请输入个性签名"
                />
              </el-col>
              <el-col :span="2"></el-col>
            </el-row>
          </el-form-item>
        </div>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelBtn">取 消</el-button>
        <el-button type="primary" @click="updateUserInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import cityData from '../../assets/js/citydata.js'
import favoriteTopic from './favorite_topic.vue'
import selfTopic from './self_topic.vue'
import top10Panel from '../_partials/top10_panel'
import userPanel from '../index/user_panel'
import userAttention from './user_attention'
import chectTopic from './chect_topic'
export default {
  data () {
    return {
      activeName: 'first',
      // 控制dialog显示与隐藏
      dialogVisible: false,
      // 获取用户id
      user_id: JSON.parse(sessionStorage.getItem('user')).user_id,
      user_info: {},
      // 城市数据
      cityData,
      // 用户话题信息
      topic_info: {}
    }
  },
  components: {
    favoriteTopic,
    selfTopic,
    top10Panel,
    userPanel,
    userAttention,
    chectTopic
  },
  created () {
    // 获取用户数据
    this.getUserInfo()
  },
  methods: {
    // 获取用户数据
    async getUserInfo () {
      const { data: res } = await this.$http.get('/user_info?id=' + this.user_id)
      this.user_info = res
      this.user_info.address = JSON.parse(this.user_info.address)
    },

    // 更新用户数据
    async updateUserInfo () {
      this.user_info.address = JSON.stringify(this.user_info.address)
      const { data: res } = await this.$http.put('/user_info', this.user_info)
      if (res.status !== 200) {
        return this.$message.error('修改失败！')
      }
      this.getUserInfo()
      this.$message.success('修改成功！')
      this.dialogVisible = false
    },
    // 取消修改用户信息
    cancelBtn () {
      this.getUserInfo()
      this.dialogVisible = false
    },
    // 获取用户头像url
    async getHeaderPicUrl () {
      var formData = new window.FormData()
      // 将文件内容追加到formdata中
      formData.append('attrName', this.$refs.fileId.files[0])
      // 发送请求，上传图片数据
      const { data: res } = await this.$http.post('/uploads', formData)
      var path = res.path.replace(/\\/g, '/')
      // 获取上传的图片路径
      this.user_info.header_pic = 'http://localhost:3000/public' + path
      // 更新数据库信息
      this.updateUserInfo()
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  width: 1000px;
  margin: 0 auto;
}
.username {
  font-size: 30px;
  margin: 20px 0;
}

p {
  margin-bottom: 0;
  margin-top: 10px;
}

.header_pic {
  position: relative;
}

.changeHeader {
  position: absolute;
  top: 0;
  height: 150px;
  width: 150px;
  z-index: 10;
  border-radius: 50%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0);
  color: rgba(255, 255, 255, 0);
  line-height: 160px;
  text-align: center;
  :hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 1);
    i {
      background-color: rgba(0, 0, 0, 0);
      font-size: 20px;
    }
  }
}

// 重置表单内容输入框
input {
  outline: none;
  background: transparent;
  border: none;
  outline: medium;
  border-bottom: 1px solid #ddd;
  width: 100%;
  height: 40px;
  :focus {
    outline: none;
    background-color: transparent;
  }
  ::selection {
    background: transparent;
  }
}

.user_info {
  text-align: right;
  display: block;
  line-height: 53px;
}

.dialog_head {
  font-size: 30px;
  text-align: center;
  margin-top: 0;
  margin-bottom: 20px;
}

.el-cascader {
  width: 100%;
  margin-top: 10px;
}
</style>
